<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar title="确认订单" navbarType='0'></wlk-navbar>
		<view class="pd30">
			<text class="line-title bold">{{lineInfo.title}}</text>
			<text class="line-desc ml20">{{lineInfo.desc}}</text>
			<view class="other-box">
				<view class="wlkflex other-info col9 mt20">
					<view class="other-title">已选套餐</view>
					<view class="value u-line-1">{{lineInfo.suitName}}</view>
				</view>
				<view class="wlkflex other-info col9 mt20">
					<view class="other-title">出游日期</view>
					<view class="value u-line-1">{{selectedDate.date}}</view>
				</view>
				<view class="wlkflex other-info col9 mt20">
					<view class="other-title">出游人数</view>
					<view class="value u-line-1">
						<text v-if="orderInfo.adult_num>0">{{orderInfo.adult_num}}成人</text>
						<text v-if="orderInfo.elder_num>0">{{orderInfo.elder_num}}老人</text>
						<text v-if="orderInfo.child_num>0">{{orderInfo.child_num}}儿童</text>
					</view>
				</view>
				<view class="wlkflex other-info col9 mt20" v-if="!$u.test.isEmpty(siteInfo)">
					<view class="other-title">集合点</view>
					<view class="value u-line-1">{{siteInfo.name}}</view>
				</view>
			</view>

		</view>
		<u-gap height="8" bgColor="#F9F9F9"></u-gap>
		<view class="pd30">
			<view class="head-title bold">联系人</view>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="100">
				<u-form-item label="姓名" prop="realname" borderBottom ref="item">
					<u--input :customStyle="{
                            padding:'13rpx 0'
                        }" v-model="form.realname" placeholder="请输入联系人姓名" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" borderBottom ref="item">
					<u--input :customStyle="{
                            padding:'13rpx 0'
                        }" v-model="form.mobile" placeholder="请输入联系人手机号" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="订单备注" border="none" ref="item">
					<u--textarea :customStyle="{backgroundColor:'#F9F9F9'}" border="none"
						v-model="form.remark"></u--textarea>
				</u-form-item>
				<u-form-item label="优惠券" border="none" ref="item">
					<u--text type="info" :text="coupon.coupon.name" v-if="coupon.coupon.id>0"></u--text>
					<u--text type="info" :text="coupon.msg" v-else></u--text>
				</u-form-item>
			</u--form>
		</view>
		<u-gap height="8" bgColor="#F9F9F9"></u-gap>
		<view class="pd30">
			<view class="head-title bold wlkflex align-end">
				<view>出游人</view>
				<!-- <view class="desc ml10">
                    <text v-if="orderInfo.adult_num>0">{{orderInfo.adult_num}}成人</text>
                    <text v-if="orderInfo.elder_num>0">{{orderInfo.elder_num}}老人</text>
                    <text v-if="orderInfo.child_num>0">{{orderInfo.child_num}}儿童</text>
                </view>-->
			</view>
			<view class="passenger-box wlkflex justify-center wrap">
				<view class="wd100 passenger-item border-bottom wlkflex justify-between"
					v-for="(item,index) in passengers" :key="index">
					<view @click="delPassenger(index)">
						<u-icon name="minus-circle" size="22" :color="themeColor"></u-icon>
					</view>
					<view class="item-info">
						<view class="bold realname">{{item.realname}}</view>
						<view class="wlkflex info mt10">
							<view class="title">
								手机号:
							</view>
							<view class="value">
								{{item.mobile}}
							</view>
						</view>
						<view class="wlkflex info mt10">
							<view class="title">
								{{idTypes[item.idtype]}}:
							</view>
							<view class="value u-line-1">
								{{item.idcard}}
							</view>
						</view>
					</view>
					<view @click="chosePassenger">
						<u-icon name="edit-pen" size="22" color="#cbcbcb"></u-icon>
					</view>
				</view>
				<view class="add-btn wlkflex justify-between wd100" @click="chosePassenger">
					<view class="icon-box wlkflex justify-center">
						<u-icon size="15" bold :color="themeColor" name="plus"></u-icon>
					</view>
					<view class="bold" :style="{color:themeColor}">添加出游人</view>
				</view>
			</view>
		</view>

		<view class="fixed-buy-btn wd100 wlkflex justify-between">
			<view class="calculate-info wlkflex">
				<block v-if="orderInfo.total_price>0">
					<view class="bz">总价：</view>
					<view class="price" v-if="coupon.coupon.id>0">
						￥{{coupon.discout_price}}  
						<span>{{orderInfo.total_price}}</span>
					</view>
					<view class="price" v-else>￥{{orderInfo.total_price}}</view>
					<view class="ml10">
						<u-icon :name="showItem?'arrow-down':'arrow-up'" @click="setShowItem" size="10"
							color="#999"></u-icon>
					</view>
				</block>
			</view>
			<view class="buy-btn">
				<u-button :customStyle="{
                    fontWeight: 'bold',
                    height:'90rpx'
                }" :color="themeColor" size="large" :disabled="!orderInfo.total_price>0" shape="circle"
					throttleTime="500" @click="submit" text="提交"></u-button>
			</view>
		</view>
		<u-popup safeAreaInsetBottom :show="showItem" closeable @close="showItem=false" round="20">
			<view class="order-item">
				<view class="pd30">
					<view class="center title">价格明细</view>
					<view class="item-info">
						<view class="info-flex wlkflex justify-between mt40">
							<view class="info-head">基本团费</view>
							<view class="info-price">￥{{orderInfo.base_price}}</view>
						</view>
						<view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.adult_num>0">
							<view class="info-desc col9">成人</view>
							<view class="info-desc-price col9">
								<text>
									￥{{selectedDate.price}}
								</text>
								<text class="ml05">
									x{{orderInfo.adult_num}}人
								</text>
							</view>
						</view>
						<view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.elder_num>0">
							<view class="info-desc col9">老人</view>
							<view class="info-desc-price col9">
								<text>
									￥{{selectedDate.elderprice}}
								</text>
								<text class="ml05">
									x{{orderInfo.elder_num}}人
								</text>
							</view>
						</view>
						<view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.child_num>0">
							<view class="info-desc col9">儿童</view>
							<view class="info-desc-price col9">
								<text>
									￥{{selectedDate.childprice}}
								</text>
								<text class="ml05">
									x{{orderInfo.child_num}}人
								</text>
							</view>
						</view>
						<view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.room_num>0">
							<view class="info-desc col9">单房差</view>
							<view class="info-desc-price col9">
								<text>
									￥{{selectedDate.roomblance}}
								</text>
								<text class="ml05">
									x{{orderInfo.room_num}}份
								</text>
							</view>
						</view>
						<block v-if="orderInfo.insurances_price>0">
							<view class="info-flex wlkflex justify-between mt30">
								<view class="info-head">保险费用</view>
								<view class="info-price">￥{{orderInfo.insurances_price}}</view>
							</view>
							<view class="info-flex wlkflex justify-between mt10" v-for="(item,index) in insurances"
								:key="index">
								<view class="info-desc col9">{{item.name}}</view>
								<view class="info-desc-price col9">
									<text>
										￥{{item.price}}
									</text>
									<text class="ml05">
										x{{orderInfo.total_people}}份x{{lineInfo.lineday}}天
									</text>
								</view>
							</view>
						</block>
						<block v-if="!$u.test.isEmpty(selectedDate.bxinfo)">
							<view class="info-flex wlkflex justify-between mt30">
								<view class="info-head">必消项目</view>
								<view class="info-price">￥{{orderInfo.bx_price}}</view>
							</view>
							<view class="info-flex wlkflex justify-between mt10"
								v-for="(item,index) in selectedDate.bxinfo" :key="index">
								<view class="info-desc col9">{{item.name}}</view>
								<view class="info-desc-price col9">
									<text>
										￥{{item.price}}
									</text>
									<text class="ml05">
										x{{orderInfo.total_people}}人
									</text>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import platform from '@/wlkutils/platform';
	var _self;
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['userInfo', 'themeColor', 'isLogin'])
		},
		data() {
			return {
				id: '',
				orderInfo: {},
				lineInfo: {},
				siteInfo: {},
				coupon: {},
				passengers: [],
				form: {
					realname: '',
					mobile: '',
					remark: '',
				},
				showItem: false,
				selectedDate: {},
				insurances: [],
				idTypes: ['身份证', '护照', '台胞证', '港澳通行证', '港澳居民居住证', '军官证', '回乡证'],
				rules: {
					'realname': {
						type: 'string',
						required: true,
						message: '请填写联系人姓名',
						trigger: ['blur', 'change']
					},
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				},
			};
		},
		onLoad(options) {
			_self = this;
			this.orderInfo = this.$Route.query;
		},
		onShow() {
			this.getData();
			uni.$on('passengerBack', (data) => {
				_self.passengers = data;
			});
		},
		onUnload() {
			uni.$off('passengerBack');
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			setShowItem() {
				this.showItem = !this.showItem;
			},

			getData() {
				return new Promise((resolve, reject) => {
					uni.$u.http.post('order/before', _self.orderInfo).then(res => {
						_self.selectedDate = res.data.selectedDate;
						_self.insurances = res.data.insurances;
						_self.lineInfo = res.data.lineInfo;
						_self.siteInfo = res.data.siteInfo;
						_self.coupon = res.data.coupon;
						console.log(res.data)
						if (!uni.$u.test.isEmpty(res.data.lastOrder)) {
							_self.form.realname = res.data.lastOrder.realname;
							_self.form.mobile = res.data.lastOrder.mobile;
						}
						resolve();
					}).catch(res => {
						reject(res);
					});
				});
			},
			chosePassenger() {
				let passenger_ids = this.passengers.map(obj => obj.id);
				passenger_ids = passenger_ids.join(',');
				const query = {
					'type': 'chose',
					'total': this.orderInfo.total_people,
					'passenger_ids': passenger_ids
				}
				this.$Router.push({
					path: '/pages/passenger/list',
					query: query
				});
			},
			delPassenger(index) {
				this.passengers.splice(index, 1)
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// if (_self.passengers.length < _self.orderInfo.total_people){
					//     uni.$u.toast('请完善出游人信息');
					//     return
					// }
					var json = _self.orderInfo;
					json.selecteDayId = _self.selectedDate.id;
					json.insurance_ids = _self.orderInfo.insurance_ids;
					json.realname = _self.form.realname;
					json.mobile = _self.form.mobile;
					json.remark = _self.form.remark;
					const passenger_ids = _self.passengers.map(obj => obj.id);
					json.passenger_ids = passenger_ids.join(',');
					json.platform = platform.get();
					if(_self.coupon.coupon){
						json.coupon_id = _self.coupon.coupon.id;
						json.discout_price = _self.coupon.discout_price;
					}
					uni.$u.http.post('order/submit', json).then(res => {
						_self.$Router.replace({
							path: '/pages/pay/pay',
							query: {
								id: res.data.order_id,
								type: 'line',
								coupon_id: res.data.coupon_id,
								discout_price: res.data.discout_price
							}
						})
					}).catch(res => {

					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF !important;
		padding-bottom: 150rpx;

		.line-title {
			font-size: $font-lg;
		}

		.line-desc {
			font-size: $font-lt;
			color: #666666;
		}

		.other-box {
			margin-top: 50rpx;

			.other-info {
				font-size: $font-base;

				.other-title {
					width: 190rpx;
				}

				.value {
					color: $uni-text-color;
				}
			}
		}

		.head-title {
			font-size: $font-lg;

			.desc {
				font-size: $font-base;
				font-weight: normal;
			}
		}

		.passenger-box {
			.add-btn {
				width: 31%;
				font-size: $font-lt;
				margin-top: 50rpx;

				.icon-box {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background-color: #F9F9F9;
				}
			}

			.passenger-item {
				padding: 30rpx 0;

				.item-info {
					width: 80%;

					.realname {
						font-size: $font-lt;
					}

					.info {
						color: $uni-text-color-grey;
						font-size: $font-base;

						.value {
							width: 55%;
							margin-left: 30rpx;
						}
					}
				}
			}

		}

		.fixed-buy-btn {
			position: fixed;
			z-index: 10076;
			padding: 20rpx 30rpx;
			background-color: #FFFFFF;
			bottom: 0;
			box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);

			.calculate-info {
				width: 50%;
				font-size: $font-lt;

				.bz {}

				.price {
					font-size: $font-max;
					color: $-tour-price-color;
					
					span{
						color: gray;
						padding-left: 5rpx;
						position: relative;
						text-decoration: line-through;
					}
					
					// span::before{
					// 	content: "";
					// 	position: absolute;
					// 	top: 50%;
					// 	left: 0;
					// 	right: 0;
					// 	height: 2px;
					// 	background-color: gray;
					// 	transform: rotate(-135deg);
					// }
				}
			}

			.buy-btn {
				width: 40%;
			}
		}

		.order-item {
			padding-bottom: 150rpx;
			min-height: 800rpx;

			.title {
				font-size: $font-lg;
				color: $uni-text-color;
				font-weight: bold;
			}

			.item-info {
				font-size: $font-lt;

				.info-flex {
					.info-head {
						font-size: $font-base;
						font-weight: bold;
					}

					.info-desc {
						font-size: $font-sm;
					}

					.info-price {
						font-size: $font-base;
						color: $-tour-price-color;
					}

					.info-desc-price {
						font-size: $font-sm;
					}
				}
			}
		}
	}
</style>